<template>
    <div>
        <navBar navTitle="" showRight_content showLeft>
            <div slot="narBarR_content" class="barR-icon flex-center" @click="fnGoSetUp">
                <i class="iconfont icon-shezhi1"></i>
            </div>
        </navBar>

        <main class="full-width92">
            <div class="my-header">
                <van-image :src="userInfoObj.userHeader ? userInfoObj.userHeader : defaultHeader" />
                <span class="my-phone">{{ userInfoObj.tel }}</span>
            </div>

            <h4 class="my-balance color-theme bgBlock-lightBlue">{{ $t('Zongzichan') }}：{{ userInfoObj.money }}</h4>

            <!--四大导航-->
            <van-grid square :border="false" class="nyNav-grid">
                <van-grid-item v-for="(item, index) in navArr" :key="index" :icon="item.icon" :text="item.title"
                    @click="fnGoNav(item)">
                    <template #icon>
                        <i class="iconfont icon-grid color-theme" :class="item.icon" />
                    </template>
                </van-grid-item>
            </van-grid>

            <!--导航-->
            <van-cell-group :border="false" class="my-router">
                <van-cell :title="item.title" :border="false" @click="fnGoNav(item)" v-for="(item, index) in routerArr"
                    :key="index">
                    <template #icon>
                        <i class="iconfont icon-router" :class="item.icon" />
                    </template>
                </van-cell>
            </van-cell-group>

        </main>

    </div>
</template>

<script>

import defaultHeader from '@/assets/images/default_avatar.svg'
import { quser_sel_api, quser_if_username_api, index_xtconfig_api } from "@/assets/js/api";
export default {
    name: "login",
    data() {
        return {
            defaultHeader,
            userInfoObj: {
                header: "",
                phone: "",
                url: "mySetup",
            },
            navArr: [],
            routerArr: []
        };
    },
    methods: {
        /*去設置*/
        fnGoSetUp() {
            console.log(this.userInfoObj);
            this.$router.push({
                name: 'my_setup',
                query: {
                    username: this.userInfoObj.username,
                    tel: this.userInfoObj.tel,
                }
            })
        },

        fnGOUrl(item) {
            this.$router.push({
                name: item.url,
            })
        },

        /*导航页跳转*/
        fnGoNav(item) {
            console.log(item);

            /*联系客服*/
            if (item.url == "my_contact") {
                index_xtconfig_api().then(res => {
                    console.log(res)
                    //window.open(res.data.value);
                    window.location.href = res.data.value;
                })
                return
            }

            /*提款*/
            if (item.url == "my_withdraw") {
                if (this.userInfoObj.username) {
                    this.$router.push({
                        name: item.url,
                        query: {
                            username: this.userInfoObj.username,
                            money: this.userInfoObj.money,
                        }
                    })
                } else {
                    this.$router.push({
                        name: "my_authentication",
                    })
                }

                return
            }
            /*认证*/
            if (item.url === "my_authentication") {
                quser_if_username_api().then(res => {
                    if (res.code == "200") {
                        console.log(res);
                        //0未填写 1通过实名制 2未通过 4待审核
                        if (res.data == 1 || res.data == 4) {
                            this.$router.push({
                                name: "my_authentication_success",
                                query: {
                                    username: this.userInfoObj.username,
                                    name_id: this.userInfoObj.name_id,
                                    status: res.data == 1 ? "Thông qua" : "Đang xác minh",
                                }
                            })
                        } else {
                            this.fnGOUrl(item);
                        }
                    } else {
                        this.fnGOUrl(item);
                    }
                })
                return
            }

            if (item.url) {
                this.fnGOUrl(item);
            }
        },

        /*獲取用戶信息*/
        fnGetUserInfo() {
            quser_sel_api().then(res => {
                if (res.code == 200) {
                    this.userInfoObj = res.data;
                    localStorage.setItem("userObj", JSON.stringify(res.data));
                }
            })
        },

    },
    created() {
        this.routerArr = [
            {
                title: this.$t('yinhangzhanghu'),
                url: "my_cardManage",
                icon: "icon-qiapian"
            }, {
                title: this.$t('Jijinmima'),
                url: "my_transaction_password",
                icon: "icon-mima"
            },
            // {
            //     title:"匯總明細",
            //     url:"my_transaction_record",
            //     icon :"icon-jifenmingxi"
            // }, {
            //     title:"歷史下單",
            //     url:"",
            //     icon :"icon-jiaoyishuju"
            // },
            {
                title: this.$t('Kehufuwu'),
                url: "my_contact",
                icon: "icon-kefu1"
            },
        ]
        this.navArr = [
            {
                title: this.$t('Cunkuan'),
                url: "my_deposit",
                icon: "icon-qiapian"
            }, {
                title: this.$t('Tikuan'),
                url: "my_withdraw",
                icon: "icon-chongzhi"
            }, {
                title: this.$t('Jiaoyilishi'),
                url: "my_transaction_record",
                icon: "icon-jifenmingxi"
            }, {
                title: this.$t('Gerenxinxi'),
                url: "my_authentication",
                icon: "icon-qiapian"
            },
        ]
        this.fnGetUserInfo();
    },

};
</script>
<style lang="scss" scoped>
.my-header {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .van-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .my-phone {
        font-size: 16px;
        margin-left: 6px;
        font-weight: bold;
    }
}

.nyNav-grid {
    margin: 10px 0;

    .icon-grid {
        margin-bottom: 10px;
        font-size: 24px;
    }
}

.my-balance {
    border-radius: 6px;
}

.my-router {
    .van-cell {
        padding: 10px 0;
    }

    .icon-router {
        align-self: center;
        margin-right: 6px;
    }
}

/deep/ .van-grid-item__text {
    height: 20px;
    /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* 如果浏览器支持的话增加一个连接符(Blink不支持) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
</style>